<template>
  <a-table
    :scroll="isPC ? {x: '100%' } : { x: '100%' }"
    :rowSelection="needSelect ? rowSelection : null"
    :size="isPC ? 'default' : 'small'"
    :columns="currentColumns"
    :dataSource="tableInfo"
    :pagination="paginationInfo"
    bordered
    @change="changeTable"
    rowKey="id"
  >
    <template
      v-for="item in currentColumns"
      :slot="item.dataIndex"
      slot-scope="text, record"
    >
      <div v-if="item.type === 'btn'">
        <a-button
          v-for="(subItem, i) in item.list"
          :key="i"
          type="link"
          :disabled="!$commonJs.isAth(subItem.ath)"
          @click="changeOpt(record, subItem.extraValue)"
          :class="subItem.className"
          v-if="record[subItem.key] == subItem.value"
        >
          {{ subItem.label }}
        </a-button>
      </div>
      <div v-else-if="item.type === 'deactivate'">
        <a-icon
          type="check-circle"
          theme="filled"
          v-if="text == item.activeIndex"
          style="color: green;font-size: 20px;"
        />
        <a-icon
          type="close-circle"
          theme="filled"
          v-else
          style="color: red;font-size: 20px;"
        />
      </div>
      <span v-else-if="item.type === 'title'">
        <a-popover>
          <template slot="content">
            <p>{{ record.title }}</p>
          </template>
          <span style="cursor: pointer">{{
            record.title ? $commonJs.str(record.title, 43) : ""
          }}</span>
        </a-popover>
      </span>
      <div v-else-if="item.type === 'img'">
        <img
          :src="$api.picPre + text"
          alt=""
          width="64px"
          style="vertical-align: middle"
        />
      </div>
      <div v-else-if="item.type === 'tag'">
        <a-tag color="green" v-if="record.status === '3'">已通过</a-tag>
        <a-tag color="red" v-if="record.status === '2'">已拒绝</a-tag>
        <a-tag color="orange" v-if="record.status === '1'">待审核</a-tag>
      </div>
      <div v-else>
        <a-popover>
          <template slot="content">
            <p>{{ text }}</p>
          </template>
          <span style="cursor: pointer">{{
            text ? $commonJs.str(text, 43) : ""
          }}</span>
        </a-popover>
      </div>
    </template>
    <span slot="avatar" slot-scope="text">
      <a-avatar v-if="!text" :size="64" icon="user" />
      <img
        v-else
        :src="$api.picPre + text"
        alt=""
        width="64px"
        height="64px"
        style="vertical-align: middle;border-radius: 50% "
      />
    </span>
    <!--    项目分类-->
    <span slot="postedOpt" slot-scope="text, record">
      <a-button
        type="link"
        class="divider"
        :disabled="!$commonJs.isAth('checkPosts')"
        v-if="record.status === '1'"
        @click="$commonJs.goPage('checkPosted', record.id)"
      >
        审核
      </a-button>
      <a-button
        type="link"
        class="divider"
        :disabled="!$commonJs.isAth('postsDetail')"
        v-else
        style="color: green"
        @click="$commonJs.goPage('detailPosted', record.id)"
      >
        详情
      </a-button>
      <a-button
        type="link"
        v-if="record.status === '3'"
        :disabled="!$commonJs.isPageAth('associationComment')"
        style="color: green"
        class="divider"
        @click="
          $commonJs.goPage(
            'associationComment',
            false,
            record.title,
            'PostingTitle'
          )
        "
      >
        查看评论
      </a-button>
      <a-button
        type="link"
        :disabled="!$commonJs.isAth('postsDetail')"
        style="color: red"
        @click="changeOpt(record, 'delete')"
      >
        删除
      </a-button>
    </span>
    <!--    前端管理 banner  -->
    <span slot="bannerLink" slot-scope="text">
      <a href="javascript:;">{{ text }}</a>
    </span>
    <!--    项目列表 新增 音频信息-->
    <span slot="videoSourceLile" slot-scope="text">
      <a :href="$api.picPre + text" target="_blank">{{ $api.picPre + text }}</a>
    </span>
  </a-table>
</template>

<script>
import { Tag, Avatar } from "ant-design-vue";
import { mapState } from "vuex";
const root = process.env.VUE_APP_API_ROOT;
export default {
  name: "index",
  components: {
    aTag: Tag,
    aAvatar: Avatar
  },
  props: {
    columns: {
      type: Array
    },
    dataSource: {
      type: Array
    },
    needSelect: {
      type: Boolean,
      default: false
    },
    slotList: {
      type: Array
    },
    pagination: {
      type: Object
    }
  },
  data() {
    return {
      paginationInfo: {
        pageSizeOptions: ["10", "20", "50", "80", "100"],
        showSizeChanger: true,
        showQuickJumper: true,
        total: 0,
        showTotal: total => {
          return "共计" + total + "条";
        }
      },
      currentColumns: [],
      tableInfo: [],
      root
    };
  },
  methods: {
    changeTable(pagination, filters, sorter) {
      this.$emit("changeTable", pagination, filters, sorter);
    },
    changeOpt(item, type) {
      this.$emit("changeOpt", item, type);
    }
  },
  watch: {
    columns: {
      handler() {
        this.currentColumns = [];
        if (this.isPC) {
          Object.assign(
            this.currentColumns,
            JSON.parse(JSON.stringify(this.columns))
          );
          console.log(this.columns);
        } else {
          this.columns.forEach(item => {
            if (item.isShowMobile) {
              this.currentColumns.push(item);
            }
          });
        }
      },
      deep: true,
      immediate: true
    },
    pagination: {
      handler() {
        Object.assign(
          this.paginationInfo,
          JSON.parse(JSON.stringify(this.pagination))
        );
      },
      deep: true,
      immediate: true
    },
    dataSource: {
      handler() {
        this.tableInfo = JSON.parse(JSON.stringify(this.dataSource));
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    ...mapState(["isPC"]),
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          alert(selectedRowKeys);
          alert(selectedRows);
        }
      };
    }
  }
};
</script>

<style scoped lang="less">
.divider::after {
  content: "|";
  display: inline;
  padding: 0 8px;
  color: @border-color-base;
}
.text-green {
  color: green;
}
.text-danger {
  color: red;
}
</style>
